<!-- 数据字典编辑表单 -->
<template>
  <q-card style="width: 700px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <q-input v-model="dto.dictType" label="字典类别" :rules="[required]" class="col-12 col-sm-6" :readonly="readonly" />
        <q-input v-model="dto.dictName" label="字典名称" :rules="[required]" class="col-12 col-sm-6" :readonly="readonly" />
        <q-input v-model="dto.remark" label="备注说明" class="col-12 q-pb-md" type="textarea" rows="2" :readonly="readonly" />
      </q-form>
    </q-card-section>

    <!-- 操作 -->
    <q-card-actions v-if="!readonly" style="margin-top: -20px">
      <span class="text-h6 text-primary">字典明细</span>
      <q-btn icon="plus" color="primary" round size="sm" class="q-ml-md" @click="handleAdd()" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :disable="loading" @click="handleSubmit">保存</q-btn>
    </q-card-actions>

    <q-card-section>
      <q-table :rows="dto.dictItems" :columns="columns" class="col-12" hide-pagination table-style="max-height:330px;width:100%">
        <template #body-cell-disabled="prop">
          <q-td :props="prop">
            <q-chip :color="prop.row.disabled ? 'red-4' : ''" dense>{{ prop.row.disabled ? '作废' : '正常' }}</q-chip>
          </q-td>
        </template>
        <!-- 列自定义区域 -->
        <template #body-cell-action="prop">
          <q-td :props="prop">
            <q-btn round size="sm" flat icon="edit" color="primary" @click="handleEdit(prop.row.dictItemId)" />
            <q-btn round size="sm" flat icon="delete" color="error" @click="handleDelete(prop.row.dictItemId)" />
          </q-td>
        </template>
      </q-table>
    </q-card-section>
    <q-separator />
  </q-card>

  <!-- form 表单 -->
  <q-dialog v-model="dialog" persistent>
    <dict-item-form :id="dictItemId" :dict-id="dto.dictId" :title="itemTitle" @close="closeDialog" @after-save="loadDict" />
  </q-dialog>
</template>

<script lang="ts" setup>
  import { Message } from 'src/utils';
  import { required } from 'src/utils/validator';
  import { useCrudForm, useTable, useFormDialog, useCrud } from 'src/composables';

  import DictItemForm from './DictItemForm.vue';
  import crudApi, { DictDto } from 'src/api/system/dict';
  import itemCrudApi from 'src/api/system/dictitem';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '数据字典表单' },
    readonly: { type: Boolean, default: false },
  });
  const emit = defineEmits(['close', 'after-save']);

  // 表单数据
  const { formRef, dto, isNew, loading, submitAction } = useCrudForm<DictDto>(crudApi, { dictItems: [] }, props, emit);
  function handleSubmit() {
    submitAction(dto.value, (data) => {
      if (isNew) dto.value = data;
      Message.success('保存成功');
      emit('after-save');
    });
  }

  function loadDict() {
    if (dto.value.dictId) {
      crudApi.readData(dto.value.dictId).then((data) => (dto.value = data));
    }
  }

  // 字典明细
  const { tc } = useTable();
  const columns = [
    tc('dictLabel', '字典名称', 100),
    tc('dictCode', '字典编码', 100),
    tc('dictValue', '字典值', 100),
    tc('disabled', '状态', 60, 'center'),
    tc('action', '操作', 70, 'center'),
  ];

  const { handleDelete: deleteAction } = useCrud(itemCrudApi);
  const handleDelete = (id: IdType) => deleteAction([id], () => loadDict());

  // 表单窗口
  const { dialog, title: itemTitle, id: dictItemId, handleAdd: addAction, handleEdit, closeDialog } = useFormDialog('字典明细');
  function handleAdd() {
    if (!dto.value.dictId) {
      Message.info('请先点击保存后在添加字典明细。');
      return;
    }
    addAction();
  }
</script>

<style lang="scss" scoped></style>
